<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入')" @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                :loading="tableLoading"
                :columns="columns"
                :dataSource="tableData" 
                :row-key="mainType.f_Code"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>
        <l-dialog   
            :width="500"
            :height="columns.length * 48 + 88"
            :title="formTitle"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form"></my-form>
        </l-dialog>
    </l-layout>
</template>

<script>
import enLocale from 'element-ui/lib/locale/lang/en'
import twLocale from 'element-ui/lib/locale/lang/zh-TW'

import MyForm from './form'
const api = window.$api.language.mapping
export default {
    components: {
        MyForm
    },
    data () {
        return {
            lr_isPage:true,
            searchWord:'',
            tableBtns:[
                {prop:'Edit',label:this.$t('编辑'),width:40},
                {prop:'Delete',label:this.$t('删除'),width:40}
            ],
            tableLoading:false,
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,
            tableData: [],


            formTitle:'',
            formVisible:false,
            formEdit:false,
            formEditRow:null,
        }
    },
    computed:{
        typeList(){
            return this.$store.state.language.type.list
        },
        columns(){
            const _columns = []
            this.typeList.forEach(item => {
                _columns.push({label:item.f_Name,prop:item.f_Code,minWidth:'120'})
            })
            return _columns
        },
        mainType(){
            return this.typeList.find(t=>t.f_IsMain == 1) || {}
        }
    },
    mounted(){
        this.loadTablePageData()
        //this.addElement() //用来加载 element-ui本身的多语言数据
    },
    methods:{
        loadTablePageData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:`F_Name DESC`,
                keyword:this.searchWord,
            }
            api.getPage(queryData).then(res=>{
                const data = this.$deepClone(res.data.data)
                this.tableData = data.rows
                this.tableTotal = data.records

                this.tableLoading = false

            }).catch(()=>{
                this.tableData = []
                this.tableLoading = false
            })
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTablePageData(true)
        },
        hanleSearch(){
            this.loadTablePageData()
        },

        // 按钮方法
        handleAdd(){
            this.formEdit = false
            this.showForm('新增翻译')
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑翻译')
        },
        handleDelete($index,row){
            this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(() => {
                this.tableData.splice($index,1)
                this.tableTotal = this.tableTotal -1
                api.remove(row.f_code).then(()=> {
                    this.$message({
                        type: 'success',
                        message: this.$t('删除成功!')
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('已取消删除')
                })        
            })
        },
        handleSave(showLoading,hideLoading){
            if(this.$refs.form.validateForm()){
                const formData = this.$refs.form.getForm()
                showLoading()
                if(this.formEdit){// 修改数据
                    api.update(this.formEditRow.f_code,formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.loadTablePageData(true)
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.loadTablePageData(true)
                    }).catch(() => {
                        hideLoading()
                    })
                }
            }
        },

        async addElement(){
            let data = {}
            this.setElementlg(data,enLocale,'english')
            this.setElementlg(data,twLocale,'traditionalchinese')
            //
            for(const name in data){
                const formData = []
                formData.push({
                    f_Name:name,
                    f_TypeCode: "chinese"
                })

                formData.push({
                    f_Name:data[name].english,
                    f_TypeCode: "english"
                })

                formData.push({
                    f_Name:data[name].traditionalchinese,
                    f_TypeCode: "traditionalchinese"
                })

                await api.add(formData)
            }
        },
        setElementlg(data,lgLocale,code){
            for(let key1 in lgLocale)
            {
                let _key1 = key1
                let value1 = lgLocale[key1]
                for(let key2 in value1){
                    let _key2 = _key1 + '.' + key2
                    let value2 = value1[key2]
                    for(let key3 in value2){
                        let _key3 = _key2 + '.' + key3
                        let value3 = value2[key3]

                        if(typeof value3 == 'string'){
                            data[_key3] = data[_key3] || {}
                            data[_key3][code] = value3
                        }
                        else{
                            for(let key4 in value3){
                                let _key4 = _key3 + '.' + key4
                                let value4 = value3[key4]
                                data[_key4] = data[_key4] || {}
                                data[_key4][code] = value4
                            }
                        }
                    }
                }
            }
        },


        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.$deepClone(this.formEditRow))
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        }
    }
}
</script>